<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width:650px">
      <el-form-item label="电影院名称" prop="cinema_name">
        <el-input v-model="form.cinema_name" type="text"></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
        <div id="main" style="height:200px; border:1px solid #666;">
        </div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" type="text"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="form.province" type="text"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" type="text"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="form.district" type="text"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="form.longitude" type="text"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="form.latitude" type="text"></el-input>
      </el-form-item>
      <el-form-item label="选择标签" prop="tags">
        <el-select multiple style="width:100%;" v-model="form.tags">
          <el-option 
            v-for="item in tags" :key="item.id"
            :label="item.tagname" 
            :value="item.tagname">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">新增电影院</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http'

export default {
  data() {
    return {
      tags: [], // 保存所有的电影院标签数组
      form: {
        cinema_name:'',
        address:'',
        province:'',
        city:'',
        district:'',
        longitude:'',
        latitude:'',
        tags:[],
      },
      rules: {
        cinema_name:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        address:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        province:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        city:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        district:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        longitude:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        latitude:[{required:true, message:'该字段不能为空', trigger:'blur'}],
        tags:[{required:true, message:'该字段不能为空', trigger:'change'}],
      }
    }
  },
  methods: {

    /** 提交表单 */
    submit(){
      this.form.tags = this.form.tags.join(' / ')

      this.$refs['form'].validate(valid=>{
        if(valid){
          // 发送请求，添加电影院信息
          httpApi.cinemaApi.add(this.form).then(res=>{ 
            console.log('新增电影院', res)
            if(res.data.code==200){
              this.$message.success('恭喜，影院开业大吉！')
              this.$router.push('/home/cinema-list')
            }
          })
        }
      })
    },

    // 初始化地图 
    initMap() {
      AMapLoader.load({
          key:"450574bf3546cb0309e12f44394dd880",    // 申请好的Web端开发者Key，首次调用 load 时必填
          version:"2.0",// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins:['AMap.Geocoder'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
          this.map = new AMap.Map("main", {  //设置地图容器id
              viewMode:"3D",    //是否为3D地图模式
              zoom: 11,           //初始化地图级别
              center:[116.397202, 39.905075], //初始化地图中心点位置
          });
          // 为地图对象绑定点击事件
          this.map.on('click', (e)=>{
            let lng = e.lnglat.getLng()
            let lat = e.lnglat.getLat()
            console.log(`经纬度：[${lng}, ${lat}]`)
            // 调用高德地图的web服务接口，查询当前经纬度的坐标
            let geocoder = new AMap.Geocoder()
            geocoder.getAddress([lng, lat], (status, result)=>{
              console.log(status, result)
              // 将数据回填到表单
              let info = result.regeocode.addressComponent
              this.form.address = result.regeocode.formattedAddress
              this.form.city = info.city
              this.form.province = info.province
              this.form.district = info.district
              this.form.latitude = lat
              this.form.longitude = lng
            })
          })
      })
    }
  },

  mounted(){
    // 初始化地图
    this.initMap()  
    
    // 初始化 电影标签选择器 select的option列表
    httpApi.cinemaApi.queryTypes().then(res=>{
      console.log('加载电影标签列表', res)
      this.tags = res.data.data
    })
  }
};
</script>

<style lang="scss" scoped>
</style>